import React, { useEffect } from "react";
import styles from "./SMSpackageList.less";
import SMSpackage from "../SMSpackage";

function SMSpackageList(props) {
  const { onClick, type, YEAR, MONTH } = props;
  const propsValue = props.value;

  const quotaMonthPack = [
    {
      type: MONTH,
      leftText: "包月",
      rightText: "1万条/月份",
      value: 10000
    },
    {
      type: MONTH,
      leftText: "包月",
      rightText: "5万条/月份",
      value: 50000
    },
    {
      type: MONTH,
      leftText: "包月",
      rightText: "10万条/月份",
      value: 100000
    }
  ];

  const quotaYearPack = [
    {
      type: YEAR,
      leftText: "包年",
      rightText: "50万条/年度",
      value: 500000
    },
    {
      type: YEAR,
      leftText: "包年",
      rightText: "100万条/年度",
      value: 1000000
    },
    {
      type: YEAR,
      leftText: "包年",
      rightText: "200万条/年度",
      value: 2000000
    }
  ];

  let renderData = [];
  let leftStyle = {};
  let curValue;
  if (type === MONTH) {
    renderData = quotaMonthPack;
    leftStyle = {
      backgroundColor: "#F9E2B5",
      color: "#E0A609"
    };
    curValue = quotaMonthPack
      .map(item => item.value)
      .find(item => item === propsValue);
  } else if (type === YEAR) {
    renderData = quotaYearPack;
    leftStyle = {
      backgroundColor: "#EDEDED",
      color: "rgba(0,0,0,0.45)"
    };
    curValue = quotaYearPack
      .map(item => item.value)
      .find(item => item === propsValue);
  }

  useEffect(() => {
    // 比对后，同步更新外部传入的值
    if (propsValue !== curValue) {
      onClick(curValue);
    }
  }, [propsValue, curValue]);
  
  return (
    <div value={curValue} className={styles.root}>
      {renderData.map(({ leftText, rightText, value }, index) => (
        <SMSpackage
          style={{
            marginRight: 20
          }}
          selected={value === propsValue}
          leftStyle={leftStyle}
          key={`${index}_${value}`}
          leftText={leftText}
          rightText={rightText}
          onClick={() => {
            onClick(value);
          }}
        />
      ))}
    </div>
  );
}

export default SMSpackageList;
